<template>
	<div>
		<Header v-if="showHeader" title="冲抵借款"></Header>
		<div class="borrow_money">
			<div v-if="finApplicationTitle == '我要申请'" class="selectStyle">
				<van-checkbox-group v-model="result">
				  <van-cell-group>
				    <van-cell
				      v-for="(item, index) in selectList"
				      :key="index"
							@click="toggle(index,item.be_paid_money,item)"
				    > 
							<p class="bold">借款人: {{item.fd_lnmy_loanman}}</p>
							<p>单据编号: {{item.fd_lnmy_listno}}</p>
							<p>借款金额: {{item.fd_lnmy_money}}</p>
							<p>冲抵金额: {{item.fd_rnmy_money}}</p>
							<p>单据日期: {{item.fd_lnmy_listdate}}</p>
							<p>借款类型: {{item.loan_type_text}}</p>
							<van-checkbox :disabled="item.disabled" :class="item.class" slot="right-icon" :name="item" ref="checkboxes" />
							<!-- <van-checkbox v-model="item.be_paid_money" slot="right-icon" :name="item" ref="checkboxes" @click="checkboxItem(item.be_paid_money,index)" /> -->
							<!-- <van-checkbox v-model="item.be_paid_money" :disabled="disabled" v-if="item.is_can_checked == 1" slot="right-icon" :name="item" ref="checkboxes" @click="checkboxItem(item.be_paid_money,index)" /> -->
				    </van-cell>
				  </van-cell-group>
				</van-checkbox-group>
				<van-tabbar :z-index="1000">
				    <van-tabbar-item>
								<van-button size="large" @click="submitButton">确定</van-button>
				    </van-tabbar-item>
				</van-tabbar>
			</div>
			
			<van-checkbox-group>
			  <van-cell-group>
			    <van-cell
			      v-for="(item, index) in list"
			      :key="index"
			    > 
						<p class="bold"><span>借款人:</span> {{item.fd_rnmy_loanman}}</p>
						<p><span>单据编号:</span> {{item.fd_rnmy_listno}}</p>
						<p><span>借款金额:</span> {{item.borrow_money}}</p>
						<p><span>单据日期:</span> {{item.fd_rnmy_listdate}}</p>
						<p><span>借款类型:</span> {{item.borrow_type}}</p>
			    </van-cell>
			  </van-cell-group>
			</van-checkbox-group>
			
			
		</div>
		<Loading v-show="showLoading"></Loading>
	</div>
</template>

<script>
	import { loanList,baoxiaoList } from "@/request/api.js";
	import Loading from "@/components/Loading.vue";
	import Header from "@/components/Header.vue";
	import axios from 'axios';
	import eventBus from '@/utils/eventBus.js';
	export default {
		name:'finBorrowMoney',
		data(){
			return { 
				showHeader:this.$store.state.showHeader,
				showLoading:false,
				list: [],
				selectList:[],
				result: [],
				paidMoney:[],
				finApplicationTitle:'',
				// checkboxShow:false
				checked:false,
				disabled:false,
				checkArr:[],
				flag:false
			}
		},
    components:{
        Loading,
        Header
    },
		created(){
			window.sessionStorage.flag = false;
		},
		mounted() {
			this.finApplicationTitle = localStorage.getItem('finApplicationTitle');
			
			let fd_payoutlist_id = this.$route.query.fd_payoutlist_id;
			/* baoxiaoList({token:this.$store.state.token,type:2,baoxiao_id:fd_payoutlist_id}).then(res=>{
					// 请求的列表数据
					let data = res.data
					// console.log('已冲抵',data);
					this.list = data.allList
			}).catch((e) => {
					console.log(error)
					this.showLoading = false;
			}), */
			/* 借款列表 */
			loanList({token:this.$store.state.token,applicant_id:this.$store.state.staffer_id,type:2,per_page:0,get_type:2,baoxiao_id:0}).then(res=>{
				// 请求的列表数据 
				this.selectList = res.data.data;
				this.selectList.forEach(item=>{
					item.disabled = false;
					item.class = "";
					if(item.is_can_checked == 0){/* 不可选 */
						item.disabled = true;
						item.class = "t-display";
					}
					item.checked = item.is_can_checked ? true : false;
				})
			
			}).catch((e)=>{
				console.log(e);
				this.showLoading = false;
			})
		},
		methods:{
			toggle(index,money,item) {
				if( item.is_can_checked == 0 ) return false; 
				let allAmount = this.$route.query.all_amount;//上一个页面带过来的项目金额
				// console.log(allAmount,'allAmount');
				this.$refs.checkboxes[index].checked=!this.$refs.checkboxes[index].checked;
				//计算总金额
				let res = this.result.reduce((start,item) => {
					// console.log(item);
				    return start+ Number(item.be_paid_money) 
				},0)
				let flag =window.sessionStorage.flag;
				if(flag == "true"){
					if(res>allAmount){//总金额大于项目金额，不能点击
						this.$refs.checkboxes[index].toggle(false);//限制勾选
						this.selectList[index].disabled=true;//禁用勾选
						this.$toast({
								duration: 1000,
								message:'冲抵金额已经大于报销金额，请重新选择'
						});
						return;
					}else{
						this.selectList.forEach(i=>{//开放全部勾选
							i.disabled=false;
						})
					}
				}
				if(!this.result.length){
					window.sessionStorage.flag = false;
				}else{
					window.sessionStorage.flag = true;
				}
				// console.log(res,'res')
				// console.log(this.result,'result')
			},
			submitButton(){
				// this.showLoading = true;
				// this.result.forEach((item,index)=>{
				// 	console.log(item.be_paid_money,'item.be_paid_money');
				// 	this.paidMoney.push(item.be_paid_money);
				// 	return this.paidMoney;
				// })
				
				let selectRes = this.result.reduce((start,item) => {
					// console.log(item);
				    return start+ Number(item.be_paid_money) 
				},0)
				
				// console.log(selectRes,'selectRes');
				eventBus.$emit('selectRes',selectRes);
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="less" scoped>
	.borrow_money {
		.bold {
			font-weight: 600;
		}
		p span{
			margin-right: 5px;
		}
		/deep/ .van-checkbox__icon--checked .van-icon {
			background-color: #02ccbd;
			border-color: #02ccbd;
		}
		/deep/ .van-tabbar-item__text{
		    display: block;
		    width: 100%;
		}
		/deep/ .van-button--large{
				width: 100%;
		    font-size: 16px;
		    font-weight: bold;
		    background-color: #02ccbd;
		    color: #fff;
		}
		.selectStyle {
			padding-bottom: 50px;
		}
	}
	.t-display{
		display: none;
	}
</style>
